<!-- 点位 》 车库 -->

<template>
  <CommonBody
    hasTree
    :tree="area_tree"
    :field="area_TREE_FIELD"
    bind="areaId"
    filterTip="车库 / 出入口名称"
    diy
    @change="toChange"
  >
    <template #treeBottom>
      <BtnPrimary title="车库同步" @click="startSubmit" />
    </template>

    <EasyScroll full>
      <EasyCard v-if="one.type !== 2" :title="`关联${CORE.MAP.REGION}`">
        <MyDetail />
        <MyBtns />
      </EasyCard>

      <EasyCard v-if="one.type !== 2" title="出入口列表">
        <EntranceSearch />
        <EntranceTable />
      </EasyCard>

      <EasyCard v-if="one.type === 2" title="车道列表">
        <RoadwaySearch />
        <RoadwayTable />
      </EasyCard>

      <EasyCard v-if="one.type !== 2" title="实时监控">
        <MyVideo />
      </EasyCard>
    </EasyScroll>

    <EntranceModal />

    <RoadwayModal />
  </CommonBody>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'PointParking',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听区域就绪
     */
    area_readyTree(ready) {
      const { param, area_tree, toChange } = this
      ready && !param.areaId && area_tree.length && toChange(area_tree[0])
    },

    /**
     * 监听车库同步
     */
    readySubmit(ready) {
      ready && this.area_startTree()
    },

    /**
     * 监听出入口新增就绪
     */
    entrance_readyAdd(ready) {
      ready && this.area_startTree()
    },

    /**
     * 监听出入口修改就绪
     */
    entrance_readyEdit(ready) {
      ready && this.area_startTree()
    },

    /**
     * 监听出入口删除就绪
     */
    entrance_readyDel(ready) {
      ready && this.area_startTree()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换结构树
     */
    toChange(data) {
      this.param.areaId = data.id
      if (this.one.id === data.id) return

      const parkId = data.type === 1 ? data.id : ''
      const entranceId = data.type === 2 ? data.id : ''
      const entranceName = data.type === 2 ? data.name : ''

      this.entrance_INIT_PARAM.parkId = this.entrance_INIT_ONE.parkId = parkId
      this.roadway_INIT_PARAM.entranceId = this.roadway_INIT_ONE.entranceId = entranceId
      this.roadway_INIT_ONE.entranceName = entranceName

      this.entrance_setParam()
      this.roadway_setParam()
      this.setOne(data)
    },
  },
}
</script>
